<template>
  <div
    class="element element--article video WSJVideo"
    v-for="(item, index) in props.latestData"
    :key="index"
  >
    <figure class="article__figure">
      <!-- 时间 -->
      <!-- <span class="article__length">{{ item.author }}</span> -->
      <router-link
        class="link"
        :to="{ path: '/videoDetail', query: { id: item.id }}"
      >
        <img class="lazyautosizes lazyloaded" :src="imgPath+item.cover" />
        <i class="icon icon--play"></i>
      </router-link>
    </figure>
    <div class="article__content over-video">
      <h3 class="article__headline">
        <router-link
          class="link"
          :to="{ path: '/videoDetail', query: { uuid: item.uuid } }"
        >
          <a class="link">
            {{ item.title }}
          </a>
        </router-link>
      </h3>
    </div>
  </div>
</template>
<script  setup>
import  getConfig  from "@/api/login.js";
let imgPath = ref('');
onMounted(()=>{
  changeVideo();
})
const changeVideo = () => {
  getConfig.getSystem()
  .then((res) => {
      if (res.code == "0") {
        imgPath.value = res.data.awsPrefix
      }
    })
    .catch((e) => {});
}

const props = defineProps(["latestData"]);
</script>
<style lang="scss" scoped></style>
